<template>
	<view class="container">
		<!-- 左侧区域 -->
		<view class="left-section" @click="$wanlshop.to('/pages/shop/index?id='+seele.page_near_top[1].id);">
			<image :src="$wanlshop.oss(seele.page_near_top[1].avatar)" mode="aspectFill" class="main-image" />
			<view class="score-box">
				<text class="score">{{seele.page_near_top[1].score_service}}分</text>
			</view>
			<view class="promotion-tag">
				<text class="promotion-text">优惠多多</text>
				<text class="thanks-text">感谢支持</text>
			</view>
		</view>

		<!-- 右侧区域 -->
		<view class="right-section">
			<view class="header">
				<text class="shop-name">{{seele.page_near_top[1].shopname}}</text>
				<view class="sales-info">
					<text class="month-sales">月售{{seele.page_near_top[1].monthly_sales_order}}+</text>
					<text class="per-capita">人均￥{{seele.page_near_top[1].per_capita}}</text>
				</view>
			</view>

			<view class="image-container">
				<view class="strict-align-container">
					<image v-for="(item, index) in this.$props.databa.goods" :key="index"
						:src="$wanlshop.oss(item.image)" :style="{
			        height: 220 + 'rpx',
			        width: 350 + 'rpx',
			        transform: `translateX(${index * 40}rpx) scale(1)`,
			        zIndex: index_arr[index],
			        right: index * 20 + 'rpx'
			      }" class="strict-image" mode="aspectFill" @click="handleClick(index)" />
				</view>
				<!-- 价格标签容器 -->
				<view class="price-tag">
					<!-- 折扣部分 -->
					<view class="discount-part">
						<text>折扣</text>
					</view>

					<!-- 价格部分 -->
					<view class="price-part">
						<text class="current-price">¥{{this.$props.databa.goods[1].price}}</text>
						<text class="old-price">¥{{this.$props.databa.goods[1].old_price}}</text>
					</view>
				</view>
			</view>


			<view class="hot-tag">
				<text class="tag-text">{{seele.page_near_top[1].goods[0].title}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		props: {
			databa: Object
		},
		computed: {
			...mapState(['seele'])
		},
		data() {
			return {
				index_arr: [],
				show_index: 0,
			}
		},
		created() {
			let tmp = [];
			let len = this.seele.page_near_top[1].goods.length;
			for (let i = 0; i < len; i++) {
				tmp.push(len - i);
			}
			this.index_arr = tmp;
			console.log(this.$props.databa.goods, "输出的内容日日日日")
		},
		methods: {
			handleClick(position) {
				console.log(position);
				// 4=> 01234
				// 3=> 12340
				// 2=> 23410
				// 1=> 34210
				// 0=> 43210	
				this.show_index = position;

				let initialArray = []; // [0 ,1, 2, 3, 4];
				for (let i = 0; i < this.index_arr.length; i++) {
					initialArray.push(i);
				}



				if (position === this.index_arr.length - 1) {
					this.index_arr = initialArray; // 
					return;
				}
				position++;
				// 截取从 position 到末尾的部分
				const firstPart = initialArray.slice(this.index_arr.length - position);
				// 截取从开头到 position 的部分
				const secondPart = initialArray.slice(0, this.index_arr.length - position).reverse();
				// 拼接两部分
				this.index_arr = firstPart.concat(secondPart);
				console.log(this.index_arr);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		padding: 20rpx;
		background-color: #fff;
	}

	.left-section {
		width: 40%;
		margin-right: 20rpx;
		background-color: #F5F5F5;

		.main-image {
			width: 100%;
			height: 187rpx;
			border-radius: 12rpx;
		}

		.score-box {
			padding: 8rpx 16rpx;
			margin: 10rpx 0;
			text-align: center;
			border-bottom: 1px solid #616161;

			.score {
				font-size: 49rpx;
			}
		}

		.promotion-tag {
			padding: 10rpx 15rpx;
			text-align: center;

			.promotion-text {
				color: #616161;
				font-size: 30rpx;
				display: block;
			}

			.thanks-text {
				color: #616161;
				font-size: 30rpx;
			}
		}
	}

	.right-section {
		flex: 1;

		.header {
			margin-bottom: 15rpx;

			.shop-name {
				font-size: 41rpx;
				font-weight: bold;
				color: #333;
			}

			.sales-info {
				display: flex;
				margin-top: 10rpx;

				.month-sales {
					color: #666;
					font-size: 24rpx;
					margin-right: 20rpx;
				}

				.per-capita {
					color: #666;
					font-size: 24rpx;
				}
			}
		}

		.image-container {
			position: relative;
			width: 400rpx;
			height: 220rpx;
		}


		.combo-image {
			width: 100%;
			height: 220rpx;
			border-radius: 8rpx;
			margin-bottom: 15rpx;
		}

		.price-tag {
			position: absolute;
			left: 0;
			bottom: 0;
			display: flex;
			width: 70%;
			height: 50rpx;
			border-radius: 0 8rpx 0 0;
			overflow: hidden;
			z-index: 88;
			background: #FC472A;
			/* 整体背景色 */
		}

		/* 斜线分割实现 */
		.discount-part {
			position: relative;
			flex: 1;
			background: #FFA99A;
			padding-left: 20rpx;
			overflow: hidden;
		}

		.discount-part::after {
			content: "";
			position: absolute;
			right: -15rpx;
			top: 0;
			width: 30rpx;
			height: 100%;
			background: #FC472A;
			transform: skewX(-15deg);
			z-index: 1;
		}

		.discount-part text {
			position: relative;
			z-index: 2;
			/* color: #FC472A; */
			font-size: 22rpx;
		}

		.price-part {
			flex: 1;
			display: flex;
			align-items: center;
			padding: 0 10rpx;
			gap: 8rpx;
			color: white;
		}

		.current-price {
			font-size: 26rpx;
			font-weight: bold;
		}

		.old-price {
			font-size: 22rpx;
			text-decoration: line-through;
			color: #F5F5F7;
		}

		.hot-tag {
			margin-top: 15rpx;

			.tag-text {
				color: #616161;
				font-size: 28rpx;
				border: 1rpx solid #616161;
				border-radius: 6rpx;
				padding: 6rpx 12rpx;
			}
		}
	}

	.strict-align-container {
		position: relative;
		height: 220rpx;
		/* 必须等于baseHeight */
		right: 55rpx;

		image {
			border: 1rpx solid #FFFFFF;
		}
	}

	.strict-image {
		height: 220rpx;
		width: 400rpx;
		position: absolute;
		margin: auto;
		/* 垂直居中关键 */
		border-radius: 16rpx;
		box-shadow: -8rpx 8rpx 20rpx rgba(0, 0, 0, 0.15);
		transition: all 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
		transform-origin: right center;
		overflow: hidden;
		/* 严格对齐保障 */
		top: 0;
		bottom: 0;
	}

	/* 悬停动画 */
	// .strict-image:hover {
	//   transform: translateX(-80rpx) scale(1.08) !important;
	//   box-shadow: -15rpx 15rpx 40rpx rgba(0,0,0,0.25);
	//   z-index: 66 !important;
	// }
</style>